{% extends "base.html" %}
{% block head %}
<style>
  .error {
    color: red;
  }
</style>
<script>
function validate(password) {
  if (password.length < 6) {
    alert("Password must be at least 6 characters long");
    return false;
  } else {
    return true;
  }
}
$(document).ready(function(){
  $("#login_form").submit(function() {
    if (validate($("#password").val())) {
      return true;
    } else {
      return false;
    }
  });
  
  $("#prospective_form").submit(function() {
    var success = true;
    if ($("#prospective_name").val() == '') {
      $("#prospective_name").siblings(".error").text("This field is required");
      success = false;
    } else {
      $("#prospective_name").siblings(".error").text("");
    }
    if ($("#prospective_email").val() == '') {
      $("#prospective_email").siblings(".error").text("This field is required");
      success = false;
    } else {
      $("#prospective_name").siblings(".error").text("");
    }
    if ($("#prospective_referrer").val() == '') {
      $("#prospective_referrer").siblings(".error").text("This field is required");
      success = false;
    } else {
      $("#prospective_name").siblings(".error").text("");
    }
    return success;
  });
});
</script>
{% endblock %}

{% block header %}
<h1 id="title">Sign up</h1>
{% endblock header %}

{% block content %}
<h3 id="subtitle">{% block subtitle %}Fonite is currently invite only.{% endblock %}</h3>
<div id='heading'>{% block heading %}{% endblock %}</div>
<div class='error'>{{error}}</div>
<div id='login_form_container'>
  <form id="login_form" action='/a/signup' method='POST'>
    {% csrf_token %}
    <div data-role="fieldcontain">
      <label for="invite_code">Invite Code</label>
      <input type='text' id='invite_code' name='invite_code' value="{{invite_code}}" placeholder="Invite Code">
    </div>
    <div data-role="fieldcontain">
      <label for="phone_number">Phone number</label>
      <input type='text' id='phone_number' name='phone_number' value="{{phone_number}}" placeholder="Phone number">
    </div>
    <div data-role="fieldcontain">
      <label for="password">Create Password</label>
      <input type='password' id='password' name='password' placeholder="Password"><br />
    </div>
    {% block submit %}
    <input type='submit' id="login" value="Create Account">
    {% endblock %}
  </form>
</div>
<hr />
<div>
  <h4>No invite code?  Fill out this form and we'll send you one during our next round of invites</h4>
  <form id="prospective_form" action='/a/signup' method='POST'>
    {% csrf_token %}
    <input type='hidden' name='prospective' value='true'>
    <div data-role="fieldcontain">
      <label for="prospective_name">Name</label>
      <input type='text' id='prospective_name' name='prospective_name' placeholder="Name">
      <div class="error"></div>
    </div>
    <div data-role="fieldcontain">
      <label for="prospective_email">Email</label>
      <input type='email' id='prospective_email' name='prospective_email' placeholder="Email">
      <div class="error"></div>
    </div>
    <div data-role="fieldcontain">
      <label for="prospective_name">How did you hear about us?</label>
      <input type='text' id='prospective_referrer' name='prospective_referrer' placeholder="">
      <div class="error"></div>
    </div>
    <input type='submit' id="login" value="Submit">
  </form>
</div>
{% endblock %}
